<template>
  <el-dialog
    :visible.sync="isVisibleEditAvatarDialog"
    width="800"
    @close="close"
    :show-close="false"
  >
    <div class="title" slot="title">
      <span>
        <input
          class="gate"
          id="element"
          type="text"
          placeholder="Five to choose from"
        /><label for="element">Name</label>
      </span>

      <i class="iconfont icon-dagou"></i>
    </div>
    <el-row>
      <el-col>
        <Search @on-search="onSearch" />
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <div class="list">
          <ul>
            <li v-for="(item, index) in 10" :key="index">
              <div class="image">
                <img
                  :src="require('~/assets/images/1.png')"
                  width="45"
                  height="45"
                  alt="avatar"
                />
                <div class="info">
                  <div class="name">CryptoCode</div>
                  <div class="wallet">
                    <span>
                      {{
                        getAddress('0xd59E42897299f7856B46eD9cD77CDf9DB9cCB99e')
                      }}
                    </span>
                  </div>
                </div>
              </div>
              <el-checkbox></el-checkbox>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
import Search from '@/components/Search.vue'
import { getOmittedAddress } from '@/utils/getOmittedAddress'
@Component({
  props: {
    isVisibleEditAvatarDialog: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    Search,
  },
})
export default class AddGroup extends Vue {
  private close() {
    this.$emit('closeDialog', false)
  }

  // 搜索按钮
  private onSearch(keyword: string) {
    console.log('dsdssdsd', keyword)
  }

  // 获取省略地址
  private getAddress(val: string) {
    return getOmittedAddress(val)
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  background-color: #2b3036;
  .el-dialog__header {
    .el-dialog__title {
      color: #fff;
    }
  }
}
::v-deep .search {
  margin-left: 0;
  input {
    width: 100%;
  }
}

.list {
  height: 400px;
  overflow-y: auto;
  padding: 50px;
  margin-top: 10px;
  ul {
    li {
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
      .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #0c0c11;
        border-color: #0c0c11;
      }
      ::v-deep .el-checkbox__input.is-focus .el-checkbox__inner {
        border-color: #0c0c11;
      }
      ::v-deep .el-checkbox__inner:hover {
        border-color: #0c0c11;
      }
      .image {
        display: flex;
        align-items: center;
        img {
          border-radius: 50%;
        }
      }
      .info {
        padding-left: 10px;
        .name {
          color: #fff;
          padding-bottom: 5px;
        }
      }
    }
  }
}

.title {
  display: flex;
  justify-content: space-between;
  i {
    cursor: pointer;
    font-size: 20px;
    &:hover {
      color: #fff;
    }
  }
  .gate {
    display: inline-block;
    width: 215px;
    padding: 10px 0 10px 15px;
    font-family: 'Open Sans', sans;
    font-weight: 400;
    color: #000;
    background: #efefef;
    border: 0;
    border-radius: 3px;
    outline: 0;
    text-indent: 65px; // Arbitrary.
    transition: all 0.3s ease-in-out;

    &::-webkit-input-placeholder {
      color: #efefef;
      text-indent: 0;
      font-weight: 300;
    }

    + label {
      display: inline-block;
      position: absolute;
      top: 20px;
      left: 20px;
      padding: 12px 15px;
      text-shadow: 0 1px 0 rgb(19 74 70 / 40%);
      background: #0c0c11;
      transition: all 0.4s ease-in-out;
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
      transform-origin: left bottom;
      z-index: 99;
      color: #fff;
      height: 37px;
      box-sizing: border-box;

      &:before,
      &:after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: 3px;
        background: #0c0c11;
        transform-origin: left bottom;
        transition: all 0.4s ease-in-out;
        pointer-events: none;
        z-index: -1;
        color: #fff;
      }
      &:before {
        background: rgba(3, 36, 41, 0.2);
        z-index: -2;
        right: 20%;
      }
    }
  }
  span:nth-child(2) .gate {
    text-indent: 85px;
  }
  span:nth-child(2) .gate:focus,
  span:nth-child(2) .gate:active {
    text-indent: 0;
  }
  .gate:focus,
  .gate:active {
    color: #377d6a;
    text-indent: 0;
    background: #fff;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;

    &::-webkit-input-placeholder {
      color: #aaa;
    }
    + label {
      transform: rotate(-66deg);
      border-radius: 3px;

      &:before {
        transform: rotate(10deg);
      }
    }
  }
}
</style>